<template>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <div class="user-left-greeting">
        <div>
          Hi，{{ user.userInfo.nickname || user.userInfo.username }}
          <span class="regular"> {{ getGreeting() }}</span>
        </div>
        <img src="@/assets/logo.png" class="logo" />
      </div>

      <t-card class="password-form" :bordered="false" title="修改密码">
        <t-form ref="form" :data="formData" :rules="rules" @submit="onSubmit">
          <t-form-item name="oldPassword" label="旧密码">
            <t-input v-model="formData.oldPassword" type="password" placeholder="请输入旧密码" />
          </t-form-item>
          <t-form-item name="newPassword" label="新密码">
            <t-input v-model="formData.newPassword" type="password" placeholder="请输入新密码" />
          </t-form-item>
          <t-form-item name="confirmPassword" label="确认密码">
            <t-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入新密码" />
          </t-form-item>
          <t-form-item>
            <t-button theme="primary" type="submit">提交</t-button>
          </t-form-item>
        </t-form>
      </t-card>
    </t-col>

    <t-col :flex="1">
      <t-card class="user-intro" :bordered="false">
        <t-avatar size="80px" :image="user.userInfo.avatar"></t-avatar>
        <div class="name">{{ user.userInfo.username }}</div>
        <div class="position">{{ user.userInfo.roles.map((item) => item.label).join('') }}</div>
      </t-card>

      <t-card class="password-tips" :bordered="false" title="密码安全小贴士" style="margin-top: 24px">
        <t-space direction="vertical" size="medium">
          <t-alert
            theme="info"
            title="密码强度建议"
            message="建议使用8位以上密码，包含大小写字母、数字和特殊字符"
          ></t-alert>
          <t-alert theme="warning" title="定期更换" message="建议每3-6个月更换一次密码，提高账户安全性"></t-alert>
          <t-alert theme="success" title="密码保护小技巧">
            <template #message>
              <ul class="tips-list">
                <li>避免使用生日、手机号等个人信息</li>
                <li>不要在多个账号使用相同密码</li>
                <li>不要将密码告诉他人或在不安全的地方记录</li>
              </ul>
            </template>
          </t-alert>
        </t-space>
      </t-card>
    </t-col>
  </t-row>
</template>
<script lang="ts">
export default {
  name: 'UserIndex',
};
</script>
<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';

import { updatePasswordApi } from '@/api/sys_user';
import { useUserStore } from '@/store';

const user = useUserStore();
const form = ref();

const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
});

const rules = {
  oldPassword: [{ required: true, message: '请输入旧密码', type: 'error' }],
  newPassword: [{ required: true, message: '请输入新密码', type: 'error' }],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', type: 'error' },
    {
      validator: (val: string) => val === formData.value.newPassword,
      message: '两次输入的密码不一致',
      type: 'error',
    },
  ],
};

const onSubmit = async () => {
  const validateResult = await form.value.validate();
  if (validateResult === true) {
    try {
      await updatePasswordApi({
        oldPassword: formData.value.oldPassword,
        newPassword: formData.value.newPassword,
        confirmPassword: formData.value.confirmPassword,
      });
      MessagePlugin.success('密码修改成功');
      formData.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      };
    } catch (error) {
      MessagePlugin.error('密码修改失败');
    }
  }
};

const getGreeting = () => {
  const hour = new Date().getHours();
  let timeGreeting = '';
  if (hour >= 5 && hour < 9) timeGreeting = '早上好，';
  if (hour >= 9 && hour < 12) timeGreeting = '上午好，';
  if (hour >= 12 && hour < 18) timeGreeting = '下午好，';
  if (hour >= 18 || hour < 5) timeGreeting = '晚上好，';

  const casualGreetings = [
    '吃饭了吗？',
    '喝水了吗？',
    '休息好了吗？',
    '工作顺利吗？',
    '今天心情如何？',
    '要记得适当休息哦！',
    '注意身体健康！',
    '今天也要加油呀！',
    '要保重身体哦！',
    '记得多运动哦！',
  ];

  const randomGreeting = casualGreetings[Math.floor(Math.random() * casualGreetings.length)];
  return `${timeGreeting}${randomGreeting}`;
};
</script>

<style lang="less" scoped>
@import './index.less';

.t-descriptions {
  margin-top: 24px;
}

.password-form {
  margin-top: 24px;

  :deep(.t-card__body) {
    padding: 24px;
  }

  .t-form {
    max-width: 400px;
  }
}

.password-tips {
  height: 100%;

  :deep(.t-card__body) {
    padding: 16px;
  }

  .tips-list {
    margin: 0;
    line-height: 1.8;
  }
}
</style>
